<!--考核单元维护 checkUnit-->
<template>
  <Layout>
    <Form ref="queryForm" :model="dataToQuery" :label-width="120">
      <Row v-show="!switchFlag" class="query-form">
        <Col span="8">
          <FormItem label="企业名称：" prop="order">
            <cascader-dom class="query-form-el" ref='queryOrgCascader' @setOrgInfo='setQueryCompanyId' :orgTree="true"
                          :currentOrgId="dataToQuery.companyId"
                          :setCurrentName="{label:dataToQuery.companyName,value:dataToQuery.companyId}"></cascader-dom>
          </FormItem>
        </Col>
        <Col span="8">
          <FormItem label='二级集团：' prop='belongOrgId'>
            <Select class='w' placeholder="二级集团" v-model='dataToQuery.twoOrgId'>
              <Option v-for="item in twoLevel" :value="item.orgId" :key="item.orgId">{{ item.orgName }}</Option>
            </Select>
          </FormItem>
        </Col>
        <Col span="8">
          <Button @click="reset" class="ivu-btn-reset">重置</Button>
          <Button type="primary" class="ivu-btn-query" icon="md-search" @click="query">查询</Button>
        </Col>
      </Row>

      <Row class="query-form">
        <Col span="24">
          <Button size="large" class="ivu-btn-add" icon="md-add" @click="addInfo">新增</Button>
          <Button icon="md-cloud-download" class="ivu-btn-add" :loading="downLoading" @click="download">导出</Button>
        </Col>
      </Row>
    </Form>
    <Table ref='table' :height="tableHeight" no-data-text="没有查询到相关数据!" @on-selection-change='getSelectRows'
           :loading='pageStatus.loading'
           border :columns="columns1" :data="dataTable">
    </Table>
    <Row style="margin-right:10px;">
      <Col span="24">
        <Page style="float: right" :total="pagedata.total" :page-size="pagedata.pageSize" @on-change="pageChange"
              @on-page-size-change="pageSizeChange" :page-size-opts="pageSizeArray" show-total show-sizer
              show-elevator/>
      </Col>
    </Row>
    <Modal :title="getModalTitle('考核单元维护')" :transfer=false :mask-closable="false" v-model="dialogShow"
           v-if="dataToView && dialogShow"
           :width=800 :styles="{height:'400px'}" class-name='limit-height-dialog'>
      <Row>
        <Col span="24">
          <Form ref="dialogForm" :class="mode === 'view'?'modal-view-detail':'modal-form'" :show-message="false"
                :model="dataToView" :rules="mode === 'view'?{} :ruleCustom"
                :label-position="mode === 'view'?'right':'top'" :label-width="mode === 'view'?160:null">

            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="11">
                <FormItem label='企业名称：' prop='basicId'>
                  <div v-if="mode === 'view'">{{ dataToView.companyName }}</div>
                  <Input v-else class='' placeholder="请选择企业名称" @on-focus="openEnviInfo" readonly suffix="ios-search"
                         type='text' v-model='dataToView.companyName'></Input>
                </FormItem>
              </Col>
              <Col span="11">
                <FormItem label='二级集团：' prop='twoOrgName'>
                  <div v-if="mode === 'view'">{{ dataToView.twoOrgName }}</div>
                  <Input v-else class='' readonly placeholder="请填写二级集团" type='text'
                         v-model='dataToView.twoOrgName'></Input>
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-around" class-name="code-row-bg">
              <Col span="23">
                <FormItem label='考核单元编号：' prop='companyNum'>
                  <div v-if="mode === 'view'">{{ dataToView.companyNum }}</div>
                  <div v-else>
                    <Input class='' placeholder="请填写考核单元编号" type='text' v-model='dataToView.companyNum'></Input>
                    <span style="color: red">只允许输入数字及减号，例：01-01</span>
                  </div>
                </FormItem>
              </Col>
            </Row>
          </Form>
        </Col>
      </Row>
      <div slot="footer">
        <Button v-if="mode != 'view'" type="primary" class='ivu-btn-save' @click="submit('dialogForm')">确定</Button>
        <Button v-if="mode != 'view'" type="primary" class='ivu-btn-cancel' @click="handleCancel">取消</Button>
        <Button v-if="mode === 'view'" class='ivu-btn-save' @click="dialogShow=false">关闭</Button>
      </div>
    </Modal>
    <Modal title="企业基本信息" :transfer=false footer-hide v-model="standardSelectModal" :width=900>
      <envInfoCompany @getInfo="getInfo"></envInfoCompany>
    </Modal>
  </Layout>
</template>

<script>
import {Api} from '@/api/index.js'
import envInfoCompany from "@/views/envinfo/compan/envInfoCompany.vue";
import pageCommonFunction from '@/components/pageCommonFunction.js'
import {formatDate} from '@/tools/index'

var cascaderDom = () => import('@/components/cascader-dom.vue');

export default {
  name: "auditForm",
  components: {
    cascaderDom, envInfoCompany
  },
  data() {
    return {
      ...this.createCommonDataField(),
      standardSelectModal: false,
      downLoading:false,
      columns1: [
        {title: '序号', width: 80, fixed: 'left', align: 'center', render: this.indexColumnsRender},
        {key: 'twoOrgName', title: '二级集团', align: 'center', minWidth: 120},
        {key: 'companyName', title: '所属单位', align: 'center', minWidth: 120},
        {key: 'companyNum', title: '考核单元编号', align: 'center', minWidth: 120},
        {key: 'updateDate', title: '更新时间', align: 'center', minWidth: 120, render: this.renderCellDate},

        this.getActionColumns()
      ],
      twoLevel: [],
      ruleCustom: {
        twoOrgName: [{required: true, message: '请填写二级集团', trigger: 'change',}],
        companyName: [{required: true, message: '请填写所属单位', trigger: 'change',}],
        // updateDate: [ { required: true, message: '请填写更新时间', trigger: 'change',type:'date'}],
        companyNum: [{
          pattern: /^(\d+-)*\d+$/,
          required: true,
          message: '请填写正确的考核单元格式',
          trigger: 'change'
        }],

      },
      tableHeight: 10,
      dictMap: {},


      // api
      queryUrl: Api.companyDirectorList,
      deleteUrl: Api.companyDirectorDelete,
      updateUrl: Api.companyDirectorUpdate,
      saveUrl: Api.companyDirectorSave,
    }
  },
  async mounted() {
    this.$http.get(Api.quqeryTwoOrgInfo).then(res => {
      this.twoLevel = res.data.data
    })
    this.setTableHeight();
    this.query();
  },
  methods: {
    ...pageCommonFunction,
    download() {
      let _this = this;
      //导出
      _this.downLoading = true;
      this.$http.get(Api.companyDirectorDownload , {
        params:this.dataToQuery,
        responseType: 'arraybuffer'
      }).then((res) => {
        _this.downLoading = false;
        const aLink = document.createElement("a");
        let blob = new Blob([res.data], {
          type: "application/vnd.ms-excel"
        })
        aLink.href = URL.createObjectURL(blob);
        aLink.download = "考核单元导出(" + formatDate(new Date(), "yyyy-MM-dd") + ").xlsx" //标题
        aLink.click();
        document.body.appendChild(aLink);
      })
    },
    getInfo(data) {
      this.standardSelectModal = false;
      this.dataToView.basicId = data.companyInfoId
      this.dataToView.twoOrgName = data.groupComName
      this.dataToView.companyName = data.companyName
    },
    openEnviInfo() {
      this.standardSelectModal = true;
    },
    deleteData(params) {
      this.deleteDateAjax(params);
    },
    query() {
      this.queryAjax();
    },
    submit(name) {
      this.submitAjax(name);
    },

    createEmptyDataToAdd() {
      return {}
    },
    afterDataToAddInit() {
      this.dataToView.companyName = null;
    }
  },
  watch: {},

}
</script>

<style lang='css' scoped>

</style>
